<template>
    <div class="tab-content">
        <el-form ref="monitorFormRef" :model="monitorForm" :rules="monitorRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="光伏装机总量" prop="solarPower">
                        <el-input v-model="monitorForm.solarPower" placeholder="请输入光伏装机总量">
                            <template #append>MW</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="共享换电总量" prop="batterySwap">
                        <el-input v-model="monitorForm.batterySwap" placeholder="请输入共享换电总量">
                            <template #append>kWh</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="共享出行总量" prop="travel">
                        <el-input v-model="monitorForm.travel" placeholder="请输入共享出行总量">
                            <template #append>次</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="共享运力总量" prop="transport">
                        <el-input v-model="monitorForm.transport" placeholder="请输入共享运力总量">
                            <template #append>次</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveMonitorData">保存能源服务配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { ElMessage } from 'element-plus'
    import { updateDataClassify } from '@/api/port'

    
    const monitorRules = {
        solarPower: [{ required: true, message: '光伏装机总量不能为空', trigger: 'blur' }],
        batterySwap: [{ required: true, message: '共享换电总量不能为空', trigger: 'blur' }],
        travel: [{ required: true, message: '共享出行总量不能为空', trigger: 'blur' }],
        transport: [{ required: true, message: '共享运力总量不能为空', trigger: 'blur' }]
    }
    // 模块4: 能源服务配置表单
    const monitorForm = ref({
        solarPower: '', // 光伏发电
        batterySwap: '', // 换电
        travel: '', // 出行
        transport: '' // 运力
    })
    const monitorFormRef = ref()
    const saveMonitorData = async () => {
        if (!monitorFormRef.value) return
        
        try {
            await monitorFormRef.value.validate()
            await updateDataClassify({
                id: 1,
                key: 'module4',
                value: monitorForm.value
            })
            console.log('保存能源服务配置:', monitorForm.value)
            ElMessage.success('保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    const init = async (module: any) => {
        if (module) {
            monitorForm.value = module
        }
    }

    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>